


<template>
  <div>
    <van-nav-bar
      title="开通协议支付"
      left-arrow
      @click-left="goback"
      style="color:white;background:#2A71C8"
    />
    <div style="background:white;">
      <p class="phone">
        卡号：
        <span>{{cardDetial.bankCard |fmtbankcode}}</span>
      </p>
      <p class="phone">
        发卡行:
        <span>{{cardDetial.bank}}</span>
      </p>
    </div>

    <van-cell-group style="margin-top:10px;">
      <van-field label="CVV2:" type="number" v-model="cvv2" placeholder="卡背面后3位" />
      <van-field label="有效期(年):" type="number" v-model="year" placeholder="例：18" />
      <van-field label="有效期(月):" type="number" v-model="month" placeholder="例：09" />
      <div class="fiex" style="border-bottom: 1px solid #ebedf0;">
        <van-field
          class="fiex1 not-b"
          label="手机号:"
          type="number"
          disabled
          v-model="cardDetial.reservePhone"
          placeholder="请输入手机号"
        />
        <!-- <p
          v-if="cardDetialJson.aisle!='txsq'"
          class="mag-r-40"
          style="background:none;color:#2A71C8;border:none"
          @click="smss()"
        >{{fayzm}}</p> -->
      </div>
      <van-field
        v-if="cardDetialJson.aisle!='txsq'"
        v-model="sms"
        center
        clearable
        label="验证码:"
        placeholder="请输入短信验证码"
      ></van-field>
    </van-cell-group>
    <p style="width:95%;text-align:left;margin-left:2.5%;margin-top:10px;color:#EC5551;">
      <span style="font-size:18px;">*</span>请根据提示认真填写您的信息，信息已加密且仅用于身份验证，可放心提交
    </p>
    <button class="ktbtn" @click="pay">开通</button>
  </div>
</template>
<style scoped>
.phone {
  color: #636363;
  padding: 10px 20px;
  font-size: 16px;
}
.van-cell__title {
  color: #636363;
}
.van-nav-bar .van-icon {
  color: white;
}
.ktbtn {
  color: white;
  display: block;
  border: none;
  background-color: #2a71c8;
  width: 90%;
  margin: 0 auto;
  margin-top: 30px;
  line-height: 40px;
  border-radius: 10px;
}
</style>
<style>
.van-nav-bar .van-icon {
  color: white;
}
</style>
<script>
var $th = "";
import { Toast } from "vant";
export default {
  data() {
    return {
      mark: this.$route.params.mark,
      cvv2: "",
      year: "",
      month: "",
      sms: null,
      yzmdata: "",
      fayzm: "发送验证码",
      orderNo: "",
      aisleMerId: "",
      cardDetial: {
        //卡详情
      },
      cardDetialJson: "" //缓存
    };
  },
  created() {
    this.$Spin.hide();
  },
  async mounted() {
    $th = this;
    $th.cardDetialJson = JSON.parse(localStorage.getItem("commitPlan"));
    var cardId = localStorage.getItem("cardId");
    try {
      var cardDetial = await $th.$axiosFun(
        "/customer/bankCard/findCardById",
        {
          id: cardId
        },
        "get"
      );
      if (cardDetial.code == 1000) {
        $th.cardDetial = cardDetial.data;
        // $th.cardDetial = cardDetial.data;
        // $th.cardDetial.overTime = $th.$fmthkdate($th.cardDetial.statementDate,$th.cardDetial.repaymentDate); //计算距离账单日的时间
      } else {
        $th.$toast(cardDetial.message);
      }
      console.log("接口返回的结果", cardDetial);
    } catch (error) {
      console.log("error", error);
    }
  },
  methods: {
    async smss() {
      if ($th.cvv2 == null || $th.cvv2.length != 3) {
        Toast("请输入正确的cvv2");
        return;
      }
      if (
        $th.year == null ||
        $th.month == null ||
        $th.year.length != 2 ||
        $th.month.length != 2 ||
        $th.month > 12
      ) {
        Toast("请输入正确的有效期");
        return;
      }
      if ($th.fayzm != "发送验证码" && $th.fayzm != "重新发送") {
        Toast("请勿重复点击");
        return;
      }
      var sendData = {
        cardId: $th.cardDetial.id, //卡id
        creditCardCode: $th.cardDetial.bankCode, //银行编号
        year: this.year, //有效年
        month: this.month, //有效月
        cv2: this.cvv2, //cv2
        aisleCode: $th.cardDetialJson.aisle, //通道标识
        aisleMerId: $th.cardDetialJson.aisleMerId, //通道商户号
        creditCardPhone: $th.cardDetial.reservePhone, //开户手机号
        customerId: $th.cardDetial.customerId, //customerId
        creditCardNo: $th.cardDetial.bankCard //开户卡号
      };

      try {
        var cardDetial = await $th.$axiosFun(
          "/plan/plan/signSms",
          sendData,
          "post"
        );
        if (cardDetial.code == 1000) {
          Toast.success({
            mask: true,
            message: "发送成功"
          });
          $th.orderNo = cardDetial.data; //返回的订单号
          $th.fayzm = 60;
          let self = this;
          let timer = window.setInterval(function() {
            self.fayzm = self.fayzm - 1;
            if (self.fayzm < 1) {
              clearInterval(timer);
              self.fayzm = "重新发送";
            }
          }, 1000);
        } else if(cardDetial.code == 7777){ //特判 当为7777 不需要发送验证码直接成功
            this.sms = 'noCode';
            $th.orderNo = cardDetial.data;
            this.$dialog.alert({
              title: '提示',
              message: '您已开通成功',
            }).then(() => {
               this.pay();
            });
        } 
         else {
          $th.$toast('('+$th.cardDetial.bankCard+')'+cardDetial.message);
        }
        console.log("接口返回的结果", cardDetial);
      } catch (error) {
        console.log("error", error);
      }

      // })
    },
    async pay() {
      console.log(this.$store.state.cccard);
      if ($th.cardDetial.reservePhone == "") {
        Toast("请输入手机号");
        return;
      }
      if ($th.cvv2 == null || $th.cvv2.length != 3) {
        Toast("请输入正确的cvv2");
        return;
      }
      if (
        $th.year == null ||
        $th.month == null ||
        $th.year.length != 2 ||
        $th.month.length != 2 ||
        $th.month > 12
      ) {
        Toast("请输入正确的有效期");
        return;
      }

      if ($th.cardDetialJson.aisle == "txsq") {
        //畅捷特判 不需要输入验证码
        var sendDataSms = {
          cardId: $th.cardDetial.id, //卡id
          creditCardCode: $th.cardDetial.bankCode, //银行编号
          year: this.year, //有效年
          month: this.month, //有效月
          cv2: this.cvv2, //cv2
          aisleCode: $th.cardDetialJson.aisle, //通道标识
          aisleMerId: $th.cardDetialJson.aisleMerId, //通道商户号
          creditCardPhone: $th.cardDetial.reservePhone, //开户手机号
          customerId: $th.cardDetial.customerId, //customerId
          creditCardNo: $th.cardDetial.bankCard //开户卡号
        };
        var cardDetial = await $th.$axiosFun(
          "/plan/plan/signSms",
          sendDataSms,
          "post"
        );
        if (cardDetial.code == 1000) {
          $th.orderNo = cardDetial.data; //返回的订单号
        } else {
          $th.$toast(cardDetial.message)
          return;
        }
        this.sms = "123456";
      }
      if (this.sms == null || this.sms.length != 6) {
        Toast("请输入正确验证码");
        return;
      }
      Toast.loading({
        mask: true,
        message: "请稍后",
        duration: 0
      });
      var sendData = {
        cardId: $th.cardDetial.id, //卡id
        creditCardCode: $th.cardDetial.bankCode, //银行编号
        year: this.year, //有效年
        month: this.month, //有效月
        smsCode: $th.sms, //短信验证码
        cv2: this.cvv2, //cv2
        orderNo: $th.orderNo, //随机订单号，后台生成
        aisleCode: $th.cardDetialJson.aisle, //通道标识
        aisleMerId: $th.cardDetialJson.aisleMerId, //通道商户号
        creditCardPhone: $th.cardDetial.reservePhone, //开户手机号
        customerId: $th.cardDetial.customerId, //customerId
        creditCardNo: $th.cardDetial.bankCard //开户卡号
      };
      var cardDetial = await $th.$axiosFun("/plan/plan/sign", sendData, "post");
      if (cardDetial.code == 1000) {
        $th.$toast("开通成功");
        setTimeout(function() {
          $th.$router.push("/dzx");
        }, 500);
      } else {
        $th.$toast(cardDetial.message);
      }
    },
    goback() {
      this.$router.push("/");
    }
  },
  filters: {
    fmtbankcode: function(bank) {
      if (bank) {
        return bank.substr(0, 4) + "********" + bank.substr(-4);
      }
    },
    fmtscname: function(fmtscname) {
      var mccname = {
        ICBC: "工商银行",
        ABC: "农业银行",
        BOC: "中国银行",
        CCB: "建设银行",
        CMBCHINA: "招商银行",
        POST: "邮政储蓄",
        ECITIC: "中信银行",
        CEB: "光大银行",
        BOCO: "交通银行",
        CIB: "兴业银行",
        CMBC: "民生银行",
        PINGAN: "平安银行",
        CGB: "广发银行",
        HXB: "华夏银行",
        SPDB: "浦发银行",
        SHB: "上海银行",
        CBHB: "渤海银行",
        JSB: "江苏银行"
      };
      if (mccname[fmtscname] == "undefind") {
        return fmtscname;
      } else {
        return mccname[fmtscname];
      }
    }
  }
};
</script>


          

